<%= turbo_frame_tag :page_sidebar do %>
<div class="d-none d-md-block">
  <h6 class="sidebar-header">Page sections</h6>
  <% if @page_preview.layout_sections? %>
    <div class="list-group-flush border-bottom mb-1 pb-2">
      <div data-controller="sortable"
         data-sortable-handle-value=".handle-section"
         data-sortable-resource-name-value="page_section"
         data-sortable-response-kind-value="turbo-stream">
        <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'header' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
      </div>
    </div>
  <% end %>
  <div id="page-sections-list" class="list-group-flush py-2">
    <div data-controller="sortable"
         data-sortable-handle-value=".handle-section"
         data-sortable-resource-name-value="page_section"
         data-sortable-response-kind-value="turbo-stream">
      <%= render partial: 'spree/admin/page_builder/sidebar_section', 
                 collection: @page_preview.sections.includes(:blocks),
                 as: :section  %>
    </div>
  </div>
  <div class="px-3">
    <%= link_to_with_icon 'new-section', Spree.t(:add_section), spree.new_admin_page_section_path(@page_preview), class: 'btn btn-primary rounded-pill text-uppercase w-100 my-2 py-2' %>
  </div>
  <% if @page_preview.layout_sections? %>
    <div class="list-group-flush border-top py-2">
      <div data-controller="sortable"
         data-sortable-handle-value=".handle-section"
         data-sortable-resource-name-value="page_section"
         data-sortable-response-kind-value="turbo-stream">
        <%= render collection: @theme_preview.sections.find_all { |s| s.role == 'footer' }, partial: 'spree/admin/page_builder/sidebar_section', as: :section  %>
      </div>
    </div>
  <% end %>
</div>
<div class="d-flex justify-content-center pt-5 d-md-none align-items-center">
  <div class="spinner-border" role="status">
  </div>
  <p class="ml-2 m-0"><%= Spree.t(:loading) %>...</p>
</div>
<% end if @page_preview.present? %>
